<template>
    <ul class="pagination d-flex justify-content-center">
      <li class="page-item" :class="{ disabled: page === 1 }">
        <span
          class="page-link"
          @click.prevent="$emit('page-change', page - 1)"
          :disabled="page === 1"
        >
          上一页
        </span>
      </li>
      <li
        v-for="pageNum in totalPages"
        :key="pageNum"
        class="page-item"
        :class="{ active: page === pageNum }"
      >
        <span
          class="page-link"
          @click.prevent="$emit('page-change', pageNum)"
          :class="{ active: page === pageNum }"
        >
          {{ pageNum }}
        </span>
      </li>
      <li class="page-item" :class="{ disabled: page === totalPages }">
        <span
          class="page-link"
          @click.prevent="$emit('page-change', page + 1)"
          :disabled="page === totalPages"
        >
          下一页
        </span>
      </li>
    </ul>
  </template>
  
  <script>
  export default {
    props: {
      page: {
        type: Number,
        required: true,
      },
      totalPages: {
        type: Number,
        required: true,
      },
    },
  };
  </script>
  
  <style scoped>
  .pagination {
    list-style: none;
    display: flex;
    justify-content: center;
  }
  
  .page-item {
    margin: 0 5px;
  }
  
  .page-link {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
  }
  
  .page-link:hover {
    background-color: #e9ecef;
    cursor: pointer;
  }
  
  .active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
  }
  
  .disabled .page-link {
    background-color: #e9ecef;
    border-color: #dee2e6;
    cursor: not-allowed;
  }
  </style>
  